import React from 'react'
export function MyBody(props) {
	return (
		<div className={props.classname}>
			{props.children}
		</div>
	);
}

export function genData(dataBlobs, page, data) {
	console.log('genData page=' + page);
	// console.log(data);

	let sectionIDs = [];
	let rowIDs = [];
	data.forEach((x, index) => {
		let sectionName = `section ${page}-${index}`
		if (! dataBlobs[sectionName]) {
			dataBlobs[sectionName] = {};
		}
		const rowName = `S${sectionName} R${index}`
		
		dataBlobs[sectionName][rowName] = x;
	});

	Object.keys(dataBlobs).forEach(x=>{
		sectionIDs.push(x)
		let keys = Object.keys(dataBlobs[x])
		rowIDs.push(keys);
	})
	
	sectionIDs = [...sectionIDs];
	rowIDs = [...rowIDs];

	return {dataBlobs, sectionIDs, rowIDs}

}

export const separator = (sectionID, rowID) => (
    <div
        key={`${sectionID}-${rowID}`}
        style={{
        backgroundColor: '#F5F5F9',
        height: 8,
        borderTop: '1px solid #ECECED',
        borderBottom: '1px solid #ECECED',
        }}
    />
);
